﻿@page "/tooltips"

<Block Title="Tooltip 提示工具条" Introduction="提供鼠标悬停或者获得焦点后显示提示框" CodeFile="tooltip.1.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <BootstrapInput TItem="string" Value="@TopString">
                    <Tooltip Placement="Placement.Top" Title="Tootip" />
                </BootstrapInput>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <BootstrapInput TItem="string" Value="@LeftString">
                    <Tooltip Placement="Placement.Left" Title="Tootip" />
                </BootstrapInput>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <BootstrapInput TItem="string" Value="@BottomString">
                    <Tooltip Placement="Placement.Bottom" Title="Tootip" />
                </BootstrapInput>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <BootstrapInput TItem="string" Value="@RightString">
                    <Tooltip Placement="Placement.Right" Title="Tootip" />
                </BootstrapInput>
            </div>
        </div>
    </div>
</Block>

<Block Title="Button 组件提示框" Introduction="提供鼠标悬停或者获得焦点后显示提示框" CodeFile="tooltip.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @TopString
                    <Tooltip Placement="Placement.Top" Title="Tootip" />
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @LeftString<Tooltip Placement="Placement.Left" Title="Tootip" />
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @BottomString<Tooltip Placement="Placement.Bottom" Title="Tootip" />
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @RightString<Tooltip Placement="Placement.Right" Title="Tootip" />
                </Button>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

@code {
    private string TopString => "Tooltip 在上方";

    private string LeftString => "Tooltip 在左方";

    private string RightString => "Tooltip 在右方";

    private string BottomString => "Tooltip 在下方";
}
